// src/APP.vue

<template>
<div id="v-model">
  <div>文本(Text)</div>
  <input v-model="textMsg" placeholder="edit me"/>
  <div>{{ textMsg }}</div>
  <div>注意：value property 和 input 事件</div>

  <br>

  <div>多行文本(Textarea)</div>
  <textarea v-model="textAreamsg" placeholder="add multiple lines"></textarea>
  <div>{{ textAreamsg }}</div>
  <div>注意：value property 和 input 事件</div>
  <br>

  <div>复选框(Checkbox)</div>
  <div id="v-model-multiple-checkboxes">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>
    <br />
    <span>Checked names: {{ checkedNames }}</span>
  </div>

  <br>

  <div>单选框(Radio)</div>
  <div id="v-model-radiobutton">
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>
    <br />
    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
    <br />
    <span>Picked: {{ picked }}</span>
  </div>

  <br>

  <div>选择框(Select)</div>
  <div>单选时：</div>
  <div id="v-model-select" class="demo">
    <select v-model="singleSelected">
      <option disabled value="">Please select one</option>
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
    </select>
    <span>Selected: {{ singleSelected }}</span>
  </div>

  <br>

  <div>多选时：</div>
  <select v-model="moreSelected" multiple>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>
  <span>Selected: {{ moreSelected }}</span>

  <br>

  <div>动态渲染时：</div>
  <div id="v-model-select-dynamic" class="demo">
    <select v-model="selected">
      <option v-for="option in options" :value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>
</div>
</template>

<script lang="ts">
import {   defineComponent, reactive, ref, toRefs } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    //文本(Text)
    const textMsg = ref('')

    //多行文本(Textarea)
    const textAreamsg = ref('')

    //复选框(Checkbox)
    const checkedNames = ref([])

    //单选框(Radio)
    const picked = ref('')

    //选择框(Select)
    //单选框
    const singleSelected = ref('')

    //多选框
    const moreSelected = ref('')

    //动态渲染
    const dynamic = reactive({
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    })

    return {
      textMsg,
      textAreamsg,
      checkedNames,
      picked,
      singleSelected,
      moreSelected,
      ...toRefs(dynamic)
    }

  }
})
</script>